<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    
    <meta name="robots" content="noindex">

    <title>JavaScript charts that knock your socks off!</title>

    <link rel="stylesheet" href="css/website.css" type="text/css" media="screen" />
    
    <style>    
        body {
            text-align: left;
        }

        ul {
            list-style: none;
        }
    </style>

    <link rel="icon" type="image/png" href="images/favicon.png">
    
    <script src="libraries/RGraph.svg.common.core.js" ></script>
    <script src="libraries/RGraph.svg.common.tooltips.js" ></script>
    <script src="libraries/RGraph.svg.bar.js" ></script>

</head>
<body  style="margin: 8px !important">

    <a href="https://www.rgraph.net" target="_blank">    
        <img src="images/rgraph.jpg" width="261" height="68" alt="RGraph: Free 2D/3D JavaScript charts" hspace="10" vspace="10" />
    </a>
    


    <div style="width: 600px; height: 300px; float: right; margin-top: 50px" id="cc"></div>






    <p>
        <script>
            function loadFB (d)
            {
                var js, fjs = document.getElementsByTagName('script')[0];
                if (document.getElementById('facebook-jssdk')) {
                    return;
                }
                
                js     = document.createElement('script');
                js.id  = 'facebook-jssdk';
                js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
                
                fjs.parentNode.insertBefore(js, fjs);
            }
            
            
            setTimeout(loadFB, 1500);
        </script>

        <div class="fb-like" style="text-align: center; display: inline-block" data-href="https://www.rgraph.net/index.html" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
        <a href="javascript: null" onclick="window.open('http://www.twitter.com/share?url=https://www.rgraph.net/&text=JavaScript%20charts%20for%20the%20web%20with%20@_RGraph%20', 'twitter-sharer-window', 'top=50,left=50,width=700,height=300')"><img src="/images/twitter-60x20.png"  style="transform: translate(10px, 8px); box-shadow: 1px 1px 1px gray" border="0" /></a>
    </p>



    <h2>Demos <span>of charts (local)</span></h2>
    
    
    <p>
        Demos of some of the various charts and features provided by RGraph
    </p>
    
    <p align="left">
        <a href="./demos/"><b>Go to the demos (local) &raquo;</b></a>
    </p>












    <h2>Demos <span>of charts (online)</span></h2>
    
    
    <p>
        The same demos as above are also available on rgraph.net. Due to browser security the AJAX demos will not work locally
        so you can see these if you go online.
    </p>
    
    <p align="left">
        <a href="https://www.rgraph.net/demos/"><b>Go to the demos (online) &raquo;</b></a>
    </p>












    <h2>Other <span>pages on rgraph.net</span></h2>
    
    
    <ul>
        <li>
            <a href="https://www.rgraph.net" target="_blank">Home page</a><br />
            The RGraph homepage on www.rgraph.net<br /><br />
        </li>

        <li>
            <b>SVG charts</b>
            
            <br />
            <br />

            <ul>
                <li>
                    <a href="https://www.rgraph.net/svg/docs/index.html" target="_blank">Examples and documentation</a><br />
                    Examples of and documentation for the types of SVG charts that are supported by RGraph.<br /><br />
                </li>
            </ul>
        </li>

        <li>
            <b>Canvas charts</b>
            
            <br />
            <br />

            <ul>
                <li>
                    <a href="https://www.rgraph.net/examples" target="_blank">Examples</a><br />
                    Examples of the types of charts that are supported by RGraph.<br /><br />
                </li>
                <li>
                    <a href="https://www.rgraph.net/docs" target="_blank">Documentation</a><br />
                    Documentation for RGraph<br /><br />
                </li>
                <li>
                    <a href="https://www.rgraph.net/docs/howto-index.html" target="_blank">HOWTO guides</a><br />
                    Guides for doing specific tasks with RGraph.<br /><br />
                </li>
            </ul>
        </li>
    </ul>




    <p style="font-size: 70%; text-align: center">
        &copy; Copyright 2017 RGraph donations. All rights reserved.
    </p>


    <script>
        data     = [[4,2,3],[5,9,6], [12,8,6],[3,6,1],[5,1,3],[3,5,1],[1,2,3]];
        tooltips = RGraph.SVG.arrayLinearize(data);
    
        tooltips.forEach(function (v,k,arr)
        {
            arr[k] = 'Result: {1},000m'.format(
                arr[k]
            );
        });
    
        var bar = new RGraph.SVG.Bar({
            id: 'cc',
            data: data,
            options: {
                variant: '3d',
                strokestyle: 'rgba(0,0,0,)',
                colors: [
                    'Gradient(#faa:#fbb)',
                    'Gradient(#aaa:#bfb)',
                    'Gradient(#aaf:#bbf)'
                ],
                gutterTop: 10,
                gutterLeft: 45,
                gutterBottom: 80,
                xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                xaxisColor: '#ddd',
                xaxisTickmarks: 0,
                yaxisColor: '#ddd',
                yaxisUnitsPost: 'km',
                yaxisTickmarks: 0,
                tooltips: tooltips,
                shadow: false,
                backgroundGridColor: '#eee',
                hmargin: 7,
                backgroundGridHlinesCount: 4,
                yaxisLabelsCount: 4,
                yaxisMin: 0,
                yaxisMax: 15
            }
        }).draw().on('beforetooltip', function (obj)
        {    
            // Some CSS that gets used for the tooltips
            RGraph.SVG.tooltips.style.fontSize        = '105%';
            RGraph.SVG.tooltips.style.fontFamily      = 'Arial, sans-serif';
            RGraph.SVG.tooltips.style.fontWeight      = 'bold';
            RGraph.SVG.tooltips.style.paddingRight    = '10px';
            RGraph.SVG.tooltips.style.paddingLeft     = '10px';
            RGraph.SVG.tooltips.style.paddingTop      = '10px';
            RGraph.SVG.tooltips.style.paddingBottom   = '10px';
            RGraph.SVG.tooltips.style.textAlign       = 'center';
            RGraph.SVG.tooltips.style.backgroundColor = 'white';
            RGraph.SVG.tooltips.style.border          = '3px black solid';
            RGraph.SVG.tooltips.style.borderWidth     = '3px';
        
        }).on('tooltip', function (obj)
        {
            var tooltip = RGraph.SVG.REG.get('tooltip'),
                idx     = RGraph.SVG.sequentialIndexToGrouped(tooltip.__index__, obj.data),
                colors  = ['red','#0f0','blue'];
    
            tooltip.style.borderColor = colors[idx[1]];
        }).draw();
    </script>

</body>
</html>